<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正文</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/blog_content.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="../img/logo.png" alt="网站logo">
        <!-- <span class="title">我的博客系统</span> -->
        <a href="blog_list.html">我的博客系统</a>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <!-- 如果后端实现了就应该是向服务器发送退出登录请求然后跳转回登录页面 -->
        <a href="login.html">注销</a>
    </div>
    </div>
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="../img/avatar.png" class="avtar" alt="">
                <h3>s_monky</h3>
                <a href="https://blog.csdn.net/ljh1257">ljh1257</a>
                <div class="counter">
                    <span>文章</span>
                    <span>专栏</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 博客时间 -->
                <div class="date">2021-06-02</div>
                <!-- 博客正文 -->
                <p>
                    从今天起我要好好敲代码.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
                    omnis natus ut! Autem alias
                    ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                    mollitia dolorum animi.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
                    omnis natus ut! Autem alias
                    ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                    mollitia dolorum animi.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
                    omnis natus ut! Autem alias
                    ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                    mollitia dolorum animi.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
                    accusantium, enim iste
                    corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
                    officiis iure velit. Blanditiis
                    pariatur delectus perferendis.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
                    accusantium, enim iste
                    corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
                    officiis iure velit. Blanditiis
                    pariatur delectus perferendis.
                </p>
            </div>
        </div>
    </div>
</body>

</html>